<template>
	<view class="mu_head" :style="{color : color}">
		{{title}}
			<view v-if="isShow" class="head_icon" :class="{ 'bgBlackIcon' : bgblack }">
				<view class="iconfont icon-zuobian" @tap="handleToBack"></view> | <view class="iconfont icon-fangzi" @tap="handleToHome"></view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"music-head",
		data() {
			return {
				
			};
		},
		props: ['title','isShow','color','bgblack'],
		methods: {
			handleToBack(){
				uni.navigateBack()
			},
			handleToHome(){
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.mu_head{
		width: 100%;
		height: 75px;
		margin: 0px;
		padding: 0px;
		position: relative;
		font-size: 16px;
		line-height: 75px;
		text-align: center;
		.head_icon{
			width: 90px;
			height: 31px;
			position: absolute;
			margin: 0px;
			padding: 0px;
			left: 8px;
			top: 25px;
			line-height: 31px;
			display: flex;
			justify-content: space-evenly;
			border-radius: 15px;
			align-items: center;
			background: rgba(0,0,0,0);
			color: white;
			.iconfont{
				font-size: 16px;
				color: white;
			}
		}
		.bgBlackIcon{
			border: 1rpx solid #e9e9e9;
			color: black;
			.iconfont{
				font-size: 16px;
				color: black;
			}
		}
	}
</style>
